<template name="components">
	<view class="page">

		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{title}}</block>
		</cu-custom>
		<Loading class="loading1" v-show="!isLoading" :isStatus='loadStatus'></Loading>
		<scroll-view scroll-y class="page">
			<view class="mianban" :style="{backgroundImage:'url('+domain+ui.mianban+')'}">
				<view class="mianban1 ">
					<view class="xianjin ">
						<countup :num="selfUser.wait_pay" color="#c95948" width='21' height='34' fontSize='34'
							v-if="isLoading"></countup>
						<view class="danwei">
							/元
						</view>
					</view>
					<view class="xianjin1">
						提现中……
					</view>
				</view>

				<view class="mianban2">
					<!-- 	<view class="mianban_box ">
						<view class="mianban2_title">
							{{selfUser.share_num}}
						</view>
						<view class="mianban2_title1">
							累计分享/次
						</view>
					</view> -->
					<!-- <view class="mianban_center">

					</view> -->
					<view class="mianban_box ">
						<view class="mianban2_title">
							{{selfUser.share_num}}
						</view>
						<view class="mianban2_title1">
							已邀请/单
						</view>
					</view>
					<view class="mianban_center">

					</view>
					<view class="mianban_box ">
						<view class="mianban2_title">
							{{selfUser.ljtx}}
						</view>
						<view class="mianban2_title1">
							累计提现/元
						</view>
					</view>
				</view>

				<view class=" mianban_but">
					<button class="cu-btn round line-orange" v-if="selfUser.wait_pay>0">正在打款中...</button>
					<button class="cu-btn round line-orange"  open-type="share"
						v-if="selfUser.wait_pay==0">立即去分享</button>
				</view>

				<view class="mianban3">
					{{selfUser.info}}
				</view>


			</view>
			<view class="record_box">
				<view class="record_head ">
					<image :src="domain+ui.arrowIcon_left" mode=""></image>
					<view class="record_title">
						红包排行榜
					</view>
					<image :src="domain+ui.arrowIcon_right" mode=""></image>
				</view>
				<scroll-view scroll-y="true" class="scrollRecord">
					<view class="record_item1" v-for="(item,index) in dataSort">
						<image class="item_img" :src="domain+ui.record_frist" mode="" v-if="index==0"></image>
						<image class="item_img" :src="domain+ui.record_scend" mode="" v-if="index==1"></image>
						<image class="item_img" :src="domain+ui.record_thrid" mode="" v-if="index==2"></image>
						<view class="item_sort" v-if="index>=3">
							{{index+1}}
						</view>
						<view class="cu-avatar round item_touxiang"
							:style="{backgroundImage:'url('+ item.touxiang+')'}"></view>
						<view class="item-name" v-html="item.name">
							<!-- {{item.name}} -->
						</view>
						<view class="item-right">
							已获 <view class="item-price">
								{{item.price}}
							</view> 元
						</view>
					</view>


				</scroll-view>
			</view>
			<scroll-view scroll-y class="record_foot">

			</scroll-view>
		</scroll-view>
	</view>
</template>

<script>
	import countup from '@/components/countUp.vue';
	export default {
		components: {
			countup
		},
		data() {
			return {
				ui: this.CON.CON.ui, //ui
				rule: "xxx",
				domain: this.Reques.resDomain,
				record: [], //佣金记录
				title: "我的红包",
				loadStatus: 'load',
				isLoading: false,
				selfUser: {},



			};
		},
		onLoad() {
			uni.getStorage({
				key: "session",
				success: (res) => {
					let data = {
						action: "getHongbaoDetail",
						openId: res.data.openId,
					};
					this.loadData(data);
				},
				fail: (err) => {
					this.Reques.tishi();
					this.loadStatus = 'error';
					console.log(err);
				},
			});




		},
		onShareAppMessage() { //分享操作
			return {
				title: "乐知课程艺术中心",
				path: '/pages/index/index?userCode=' + this.initCode
			}
		},
		computed: {
			dataSort() { //数据排序
				return this.selfUser.record.sort(function(a, b) {
					return b.price - a.price;
				});
			}
		},
		methods: {
			/**
			 * 时间戳转换为日期格式
			 * @param {Object} str
			 */
			todate(str) {
				return this.Reques.to_date(str, 0);
			},
			/**
			 * 加载红包数据
			 * @param {Object} data
			 */
			loadData(data) {

				this.Reques.commonQuest("xcx/order.api.php", "POST", data).then((res) => {
					console.log(res.data);
					if (res.statusCode == 200 && res.data.code == 0) {
						this.isLoading = true;
						this.selfUser = res.data.data;
					} else {
						this.loadStatus = 'error2';
					}
				}, (err) => {
					this.loadStatus = 'error2';
					console.log(err);
				});

			},
			getShare() {
				uni.navigateTo({
					url: "../index/index",
					animationType: "slide-in-left"
				})
			}
		}


	}
</script>

<style scoped>
	@import 'home.css';
</style>
